<!--
 * @Description: useVirtualList（虚拟列表）
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:34:50
 * @LastEditTime: 2022-12-29 17:04:09
 * @LastEditors: r_yuesheng
-->
<template>
  <div class="flex">
    <el-input v-model="currJump" style="width:300px" size="large"></el-input>
    <el-button @click="handleScrollTo" type="primary" style="width:100px" class="ml10">跳转</el-button>
  </div>
  <div class="flex mt20">
    <div>
      <h3>使用core方法</h3>
      <div class="h300 w500 overflowY-auto" style="background: blanchedalmond;" :ref="containerProps.ref" @scroll="containerProps.onScroll">
        <div :style="wrapperProps.style">
          <div v-for="item in list" :key="item" class="pt10 pl10" style="
            height: 59px;
            border-bottom: 1px solid #cccccc;
          ">
            {{`行 ${ item.index}`}}
          </div>
        </div>
      </div>
    </div>
    <div class="ml54">
      <h3>使用组件</h3>
      <UseVirtualList id="tempVirtual" :list="listData" :options="{
      itemHeight: 60,
      overscan: 10,
    }" height="300px" style="background: #cde8ff;" class="w500">
        <template #="props">
          <div style="height: 59px;border-bottom: 1px solid #cccccc;" class="pt10 pl10">Row {{ props.index }}</div>
        </template>
      </UseVirtualList>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs, computed, getCurrentInstance } from 'vue';
import { useVirtualList } from '@vueuse/core';
import { UseVirtualList } from '@vueuse/components';
export default {
  name: '',
  props: {},
  components: { UseVirtualList },
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    function initState() {
      return {
        currJump: 0,
        listData: Array.from(Array(99999).keys()),
      };
    }
    const state = reactive(initState());
    const { list, wrapperProps, containerProps, scrollTo } = useVirtualList(Array.from(Array(99999).keys()), {
      itemHeight: 60,
      overscan: 10,
    });
    const handleScrollTo = () => {
      scrollTo(state.currJump);
      //偏移量
      const tempVirtual = document.getElementById('tempVirtual');
      tempVirtual.scrollTo(0, state.currJump * 60);
    };

    return {
      ...toRefs(state),
      list,
      wrapperProps,
      containerProps,
      handleScrollTo,
    };
  },
};
</script>